<template>
    <view class="main">
        <view class="nvabar">
            <uni-icons type="left" style="position: relative; top: 35rpx;" size="30" @click="back()"></uni-icons>
            <view style="position: relative; top: 35rpx; left: 250rpx;" size="30">个人信息</view>
        </view>

        <view class="userInfo">
            <uni-list>
                <uni-list-item>
                    <template v-slot:body>
                        <text class="slot-box slot-text">头像</text>
                    </template>
                    <template v-slot:footer>
                        <uni-file-picker class="upload" limit="1" :del-icon="false" disable-preview
                            file-mediatype="image" @select="select" :imageStyles="imageStyles"
                            v-model="img_desc">选择</uni-file-picker>
                    </template>
                </uni-list-item>
                <uni-list-item showArrow title="名字" to="/pages/me/userInfo/name" @click="toName()" rightText="右侧文字" />
            </uni-list>

        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { getCurrentInstance, ref, type Ref, nextTick } from 'vue';
import { request } from '@/api/request';
import type { AccountDto } from "@/api/model/account/AccountDto";
import { BASE_URL } from "@/api/request";
const account: Ref<AccountDto | undefined> = ref();
const img_desc: any[] = []

onLoad(async (option) => {
    account.value = uni.getStorageSync('account');
    img_desc.push({ fileID: 1, url: `${account.value?.avatar}` })

});

const imageStyles = {
    width: 64,
    height: 64,
    border: {
        radius: '50%'
    }
}


const select = async (e: any) => {
    let token = uni.getStorageSync('token');
    let avatarUrl = '';
    // Wrap uni.uploadFile in a promise

    uni.uploadFile({
        url: `${BASE_URL}/main/account/updateAvatar`,
        filePath: e.tempFilePaths[0],
        name: 'file',
        header: {
            'Authorization': `${token}`
        },
        success: res => {
            account.value = res.data.account;
            console.log(JSON.stringify(res.data), "头像1");
            img_desc.length = 0;
            img_desc.push({ fileID: 1, url: `${res.data}` });
            console.log(JSON.stringify(JSON.stringify(img_desc.toString)), "头像2");
            uni.setStorage({
                key: 'account',
                data: account.value,
                success: () => {
                    uni.$emit('accountUpdated')
                }
            });
            let a = uni.getStorageSync('account');
        },
        fail: err => {
            console.error(err, "上传失败");
        }
    });


    // try {
    //     await uploadFile(); // Wait for the upload to complete
    //     const data = { avatarUrl: avatarUrl }
    //     const operation = {
    //         method: 'POST',
    //         url: '/main/account/updateAvatar',
    //         data: avatarUrl,
    //         tokenRequired: true // Indicates if token is required
    //     };
    //     let b = uni.getStorageSync('account');
    //     console.log('b' + JSON.stringify(b))
    //     const res = await request(operation);
    //     account.value = res.data.account
    //     console.log('account:' + JSON.stringify(account.value))
    //     uni.setStorage({
    //         key: 'account',
    //         data: account.value,
    //         success: () => {
    //             uni.$emit('accountUpdated')
    //         }
    //     });
    //     let a = uni.getStorageSync('account');
    //     console.log('a' + JSON.stringify(a))
    // } catch (error) {
    //     console.error('An error occurred:', error);
    // }
};

const toName = () => {
    console.log('!!!!!!!!!!!!!!!!!!!!!')
    uni.navigateTo({
        url: 'pages/me/userInfo/name'
    })
}

const back = () => {
    uni.navigateBack({
        delta: 2
    });
};

</script>

<style lang="scss">
page {
    width: 100%;
    height: 100%;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #F1F5FF;
}

.nvabar {
    width: auto;
    height: 130rpx;
    display: flex;
}

.userInfo {
    width: auto;
    height: auto;
    background-color: white;

    .upload {
        position: relative;
        left: 220rpx;
    }

    .image {
        position: relative;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
    }

    .slot-box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .slot-text {
        flex: 1;
        font-size: 14px;
        margin-right: 10px;
    }
}
</style>